<!DOCTYPE html>
<html class="ng-app:myApp" id="ng-app" ng-app="myApp" xmlns:ng="http://angularjs.org"><!--  xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Cache-Control" content="no-store"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<title>Insert title here</title>

<link href="/res/lib/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="/res/lib/font-awesome/css/font-awesome.css" type="text/css" rel="stylesheet" />
<link href="/res/lib/metisMenu/jquery.metisMenu.css" type="text/css" rel="stylesheet" />

<link href="/res/theme/admin/css/i-bootstrap.css" type="text/css" rel="stylesheet" />
<link href="/res/theme/admin/css/admin.css" type="text/css" rel="stylesheet" />
<link href="/res/theme/admin/css/main.css" type="text/css" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="/res/lib/bootstrap/html5shiv.js"></script>
  <script src="/res/lib/bootstrap/respond.min.js"></script>
<![endif]-->

<!--[if lte IE 8]>
  <script src="/res/lib/json2.js"></script>
<![endif]-->
<!--[if lte IE 8]>
  <script>
    document.createElement('ng-include');
    document.createElement('ng-pluralize');
    document.createElement('ng-view');

    // Optionally these for CSS
    document.createElement('ng:include');
    document.createElement('ng:pluralize');
    document.createElement('ng:view');
  </script>
<![endif]-->

<link href="/res/lib/echarts/i-echarts.css" type="text/css" rel="stylesheet" />
<script src="/res/lib/echarts/esl.js"></script>
<style type="text/css">
.panel-heading {
  padding: 3px 15px;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}
.table {
  width: 100%;
  margin-bottom: 3px;
}
.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
  padding: 2px;
}
.panel .tool-bar li a {
  display: block;
  padding: 3px 10px;
  margin: -5px 0;
  border-left: 1px solid rgba(0, 0, 0, .1);
  transition: background-color .2s ease;
  -webkit-transition: background-color .2s ease;
  -moz-transition: background-color .2s ease;
  -ms-transition: background-color .2s ease;
  -o-transition: background-color .2s ease;
}

.nav>li>a {
  position: relative;
  display: block;
  padding: 2px 15px;
}

[i-dg="result"] {
margin-top: 5px;
}

</style>
</head>
<body ng-controller="mainController">
  <div id="wrapper">
    <!-- header -->
    <nav id="top-nav" class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#" style="font-size: 20px;"><i class="fa fa-crosshairs"></i> Admin Panel</a>
      </div>
      <ul class="nav navbar-top-links navbar-right">
          <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                <i class="fa fa-user fa-fw"></i> &nbsp;User&nbsp; <i class="fa fa-caret-down"></i>
              </a>
              <ul class="dropdown-menu dropdown-user">
                  <li><a href="#"><i class="fa fa-sign-out fa-fw"></i> 登出</a></li>
              </ul>
          </li>
      </ul>
    </nav>
    <!-- sidebar -->
    <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="side-menu">
            <li>
                <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> <span class="text">Dashboard</span></a>
            </li>
            <li class="active">
                <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> <span class="text">First Level</span><span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="flot.html"><span class="text">Second Level</span></a>
                    </li>
                    <li>
                        <a href="morris.html"><span class="text">Second Level</span></a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#"><i class="fa fa-sitemap fa-fw"></i> <span class="text">First Level</span><span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="#"><span class="text">Second Level Item</span></a>
                    </li>
                    <li>
                        <a href="#"><span class="text">Second Level Item</span></a>
                    </li>
                    <li>
                        <a href="#"><span class="text">Third Level<span class="fa arrow"></span></a>
                        <ul class="nav nav-third-level">
                            <li>
                                <a href="#"><span class="text">Third Level Item</span></a>
                            </li>
                            <li>
                                <a href="#"><span class="text">Third Level Item</span></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>           
        </ul>
      </div>
    </nav>

    <div id="main-wrapper">
      <div class="breadcrumbs" id="breadcrumbs">
        <ul class="breadcrumb">
          <li>
            <a href="#">Home</a>
          </li>
          <li class="active">Dashboard</li>
        </ul><!-- .breadcrumb -->
      </div>
      <div id="page-wrapper">
        <div class="row">
          <div class="col-lg-12">
            <div class="panel panel-primary" id="dzkbPanel">
              <div class="panel-heading clearfix" style="font-size:16px;">
                <span class="pull-left">
                  <i class="fa fa-truck"></i> &nbsp; To Do List <small>（数据生成时间：<span id="genTime"></span>）</small>
                </span>
                <ul class="tool-bar">
                  <li><a href="#" class="refresh-widget" id="srcScreenBtn"><span class="glyphicon glyphicon-resize-small"></span></a></li>
                  <li><a href="#" id="fullScreenBtn"><span class="glyphicon glyphicon-fullscreen"></span></a></li>
                </ul>
              </div>
              <div class="panel-body no-padding collapse in" id="dzkbTabs" style="padding: 0 15px 5px 15px">


                <div class="row" style="margin-bottom: 15px;">
                  <div class="col-lg-2">
                      <div style="margin: 30px 10px 10px 10px;">
                        <img src="/res/imgs/dzkb/mj.png" class="img-responsive">
                        <br/><br/>
                        <img src="/res/imgs/dzkb/logo.png" class="img-responsive">
                      </div>
                  </div>
                  <div class="col-lg-5">
                    <div id="echarts-bar-xs" style="height:190px"></div>
                  </div>
                  <div class="col-lg-5">
                    <div id="echarts-bar-fs" style="height:190px"></div>
                  </div>
                </div>


                <div class="tabbable">
                <ul class="nav nav-tabs">
                  <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
                  <li><a href="#tab2" data-toggle="tab">Tab2</a></li>
                  <li><a href="#tab3" data-toggle="tab">Tab3</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                  <div class="tab-pane active" id="tab1">
                    <div class="row">
                      <div class="col-lg-12" id="block1">
                        <div class="alert alert-info" ng-show="block1.result.length == 0">
                            No result found
                        </div>
                        <div i-dg="result" ng-show="block1.result.length > 0">
                          <table class="table table-bordered table-condensed table-hover">
                            <thead>
                                <tr>
                                    <th>name</th>
                                    <th>value</th>
                                    <th>date</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="row in block1.result | startFrom:block1.currentPage*block1.pageSize | limitTo:block1.pageSize">
                                    <td>{{row.name}}</td>
                                    <td>{{row.val}}</td>
                                    <td>{{row.dat | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                                </tr>
                            </tbody>
                          </table>
                        </div>
                        <div>
                          <div class="pull-left">
                            <p class="bg-info">当前显示第 {{block1.currentPage*block1.pageSize+1}} 至 {{(block1.currentPage+1)*block1.pageSize > block1.result.length ? block1.result.length : (block1.currentPage+1)*block1.pageSize}} 项结果，共 {{block1.result.length}} 项</p>
                          </div>
                          <div class="pull-right">
                            <button class="btn btn-default" ng-disabled="block1.currentPage == 0" ng-click="block1.currentPage=block1.currentPage-1">
                                Previous
                            </button>
                            {{block1.currentPage+1}}/{{block1.numberOfPages()}}
                            <button dom="nextPage" class="btn btn-default" ng-disabled="block1.currentPage >= block1.result.length/block1.pageSize - 1" ng-click="block1.currentPage=block1.currentPage+1">
                                Next
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="tab-pane fade" id="tab2">
                    <div class="row">
                      <div class="col-lg-12" id="block2">
                        <div class="alert alert-info" ng-show="block2.result.length == 0">
                            No result found
                        </div>
                        <div i-dg="result" ng-show="block2.result.length > 0">
                          <table class="table table-bordered table-condensed table-hover">
                            <thead>
                                <tr>
                                    <th>name</th>
                                    <th>value</th>
                                    <th>date</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="row in block2.result | startFrom:block2.currentPage*block2.pageSize | limitTo:block2.pageSize">
                                    <td>{{row.name}}</td>
                                    <td>{{row.val}}</td>
                                    <td>{{row.dat | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                                </tr>
                            </tbody>
                          </table>
                        </div>
                        <div>
                          <div class="pull-left">
                            当前显示第 {{block2.currentPage*block2.pageSize+1}} 至 {{(block2.currentPage+1)*block2.pageSize > block2.result.length ? block2.result.length : (block2.currentPage+1)*block2.pageSize}} 项结果，共 {{block2.result.length}} 项
                          </div>
                          <div class="pull-right">
                            <button class="btn btn-default" ng-disabled="block2.currentPage == 0" ng-click="block2.currentPage=block2.currentPage-1">
                                Previous
                            </button>
                            {{block2.currentPage+1}}/{{block2.numberOfPages()}}
                            <button dom="nextPage" class="btn btn-default" ng-disabled="block2.currentPage >= block2.result.length/block2.pageSize - 1" ng-click="block2.currentPage=block2.currentPage+1">
                                Next
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="tab-pane fade" id="tab3">
                    <div class="row">
                      <div class="col-lg-12" id="block3">
                        <div class="alert alert-info" ng-show="block3.result.length == 0">
                            No result found
                        </div>
                        <div i-dg="result" ng-show="block3.result.length > 0">
                          <table class="table table-bordered table-condensed table-hover">
                            <thead>
                                <tr>
                                    <th>name</th>
                                    <th>value</th>
                                    <th>date</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="row in block3.result | startFrom:block3.currentPage*block3.pageSize | limitTo:block3.pageSize">
                                    <td>{{row.name}}</td>
                                    <td>{{row.val}}</td>
                                    <td>{{row.dat | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                                </tr>
                            </tbody>
                          </table>
                        </div>
                        <div>
                          <div class="pull-left">
                            当前显示第 {{block3.currentPage*block3.pageSize+1}} 至 {{(block3.currentPage+1)*block3.pageSize > block3.result.length ? block3.result.length : (block3.currentPage+1)*block3.pageSize}} 项结果，共 {{block3.result.length}} 项
                          </div>
                          <div class="pull-right">
                            <button class="btn btn-default" ng-disabled="block3.currentPage == 0" ng-click="block3.currentPage=block3.currentPage-1">
                                Previous
                            </button>
                            {{block3.currentPage+1}}/{{block3.numberOfPages()}}
                            <button dom="nextPage" class="btn btn-default" ng-disabled="block3.result==null || block3.result.length == 0 || block3.currentPage >= block3.result.length/block3.pageSize - 1" ng-click="block3.currentPage=block3.currentPage+1">
                                Next
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                </div>
              </div>

                
              </div>
            </div><!-- /panel -->
          </div>
        </div> 



      </div>
    </div>
    <!-- page -->
    


  </div>


  
  
</body>

<script src="/res/lib/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/res/lib/jquery-migrate-1.2.1.js" type="text/javascript"></script>

<script src="/res/lib/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<script src="/res/lib/angularjs/angular.min.js"></script>
<script src="/res/lib/angularjs/angular-route.js"></script>
<script src="/res/lib/angularjs/plugin/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="/res/lib/angularjs/plugin/i-angular.js"></script>

<script src="/res/lib/metisMenu/jquery.metisMenu.js"></script>
<script src="/res/lib/jquery.blockUI.js"></script>

<script src="/res/js/utils/admin_lib.js"></script>

<script src="/res/js/admin/route.js"></script>
<script src="/res/js/admin/admin.js"></script>
<script src="/res/js/utils.js"></script>

<script>
var screenWith = 1024;
var screenHeight = 900;

var nextTabInterval;
var nextPageInterval;

var nextTabInterval_time = 2000;
var nextPageInterval_time = 2000;
var pageSizeGC = 10;

$(function() {
  screenWith = $(this).width();
  screenHeight = $(this).height();

  onClickFullScreen();
  onClickSrcScreen();

  onKey();

  onShowTab();
});

function setNextTabInterval() {
  //clearTimeout(nextTabInterval);
  clearTimeout(nextPageInterval);

  //nextTabInterval = setInterval(function() {
    var tabs = $('#dzkbTabs .nav-tabs > li');
    var active = tabs.filter('.active');
    var next = active.next('li');
    var toClick = next.length ? next.find('a') : tabs.eq(0).find('a');

    toClick.trigger('click');
  //}, nextTabInterval_time);
}

function setNextPageInterval(blockId) {
  clearTimeout(nextTabInterval);
  clearTimeout(nextPageInterval);

  nextPageInterval = setInterval(function() {
    var nextPageDom = $("#" + blockId + " [dom='nextPage']");
    if (nextPageDom.is(':enabled')) {
      nextPageDom.trigger('click');
    } else {
      clearTimeout(nextPageInterval);

      var tabHref = $('#dzkbTabs .nav-tabs > li').filter('.active').find('a').attr('href');
      if(tabHref == '#tab3'){
        angular.element('body').scope().onQuery(true);
        myChart.setOption(option);
      }else{
        setNextTabInterval();
      }
    }
  }, nextPageInterval_time);
}

function onShowTab() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var scope = angular.element('body').scope();
    scope.init();

    var target = e.target.hash;
    if (target == '#tab1') {
      setNextPageInterval("block1");
    } else if (target == '#tab2') {
      setNextPageInterval("block2");
    } else if (target == '#tab3') {
      setNextPageInterval("block3");
    }

    scope.$apply();
  });
}

function onClickFullScreen() {
  $("#fullScreenBtn").on("click", function() {
    $(".navbar-static-top, .navbar-static-side, #breadcrumbs").hide();
    var mainWrapper = $("#main-wrapper");
    mainWrapper.css("width", screenWith);
    mainWrapper.css("margin", "0");
  });
}

function onClickSrcScreen() {
  $("#srcScreenBtn").on("click", function() {
    $(".navbar-static-top, .navbar-static-side, #breadcrumbs").show();
    var mainWrapper = $("#main-wrapper");
    mainWrapper.removeStyle("width");
    mainWrapper.css("margin", "0 0 0 220px");
  });
}

function onKey() {
  var map = {
    18 : false,
    76 : false
  };
  $(document).keydown(function(e) {
    if (e.keyCode in map) {
      map[e.keyCode] = true;
      if (map[18] && map[76]) {
        $("#fullScreenBtn").click();
      }
    }
  }).keyup(function(e) {
    if (e.keyCode in map) {
      map[e.keyCode] = false;
    }
  });

  var map2 = {
    18 : false,
    83 : false
  };
  $(document).keydown(function(e) {
    if (e.keyCode in map2) {
      map2[e.keyCode] = true;
      if (map2[18] && map2[83]) {
        $("#srcScreenBtn").click();
      }
    }
  }).keyup(function(e) {
    if (e.keyCode in map2) {
      map2[e.keyCode] = false;
    }
  });
}

myApp.controller('mainController', function($scope, $http, $filter) {

  $scope.setErrMsg = function(msg) {
    $scope.showMsg = true;
    $scope.msgClass = "alert alert-danger";
    $scope.msg = msg;
  };
  $scope.setSusMsg = function(msg) {
    $scope.showMsg = true;
    $scope.msgClass = "alert alert-success";
    $scope.msg = msg;
  };
  $scope.resetMsg = function() {
    $scope.showMsg = false;
    $scope.msg = '';
  };

  $scope.onQuery = function(isRecycle) {
    blockElement($("#dzkbPanel"));
    
      $("#genTime").html(new Date());

      var date = new Date();
        var datat = [
          {name:'name', val:1, dat: date},
          {name:'name', val:2, dat: date},
          {name:'name', val:3, dat: date},
          {name:'name', val:4, dat: date},
          {name:'name', val:5, dat: date},
          {name:'name', val:6, dat: date},
          {name:'name', val:7, dat: date},
          {name:'name', val:8, dat: date},
          {name:'name', val:9, dat: date},
          {name:'name', val:10, dat: date},
          {name:'name', val:11, dat: date},
          {name:'name', val:12, dat: date},
          {name:'name', val:13, dat: date},
          {name:'name', val:14, dat: date},
          {name:'name', val:15, dat: date},
          {name:'name', val:16, dat: date},
          {name:'name', val:17, dat: date},
          {name:'name', val:18, dat: date},
          {name:'name', val:19, dat: date},
          {name:'name', val:20, dat: date},
          {name:'name', val:21, dat: date}
        ];

      $scope.block1.result = datat;
      $scope.block2.result = datat;
      $scope.block3.result = datat;
      unBlockElement($("#dzkbPanel"));

      if(isRecycle){
        var firstTab = $('#dzkbTabs .nav-tabs > li').eq(0).find('a');
        firstTab.trigger('click'); 
      }else{
        setNextPageInterval("block1");
      }
      

      console.log(333333);
  };

  $scope.init = function() {
    $scope.block1.currentPage = 0;
    $scope.block2.currentPage = 0;
    $scope.block3.currentPage = 0;
  };

  $scope.block1 = {
    currentPage : 0,
    pageSize : pageSizeGC,
    init : function() {
      $scope.block1.currentPage = 0;
      $scope.block1.result = null;
    },
    numberOfPages : function() {
      return Math.ceil($scope.block1.result.length / $scope.block1.pageSize);
    }
  };

  $scope.block2 = {
    currentPage : 0,
    pageSize : pageSizeGC,
    init : function() {
      $scope.block2.currentPage = 0;
      $scope.block2.result = null;
    },
    numberOfPages : function() {
      return Math.ceil($scope.block2.result.length / $scope.block2.pageSize);
    }
  };

  $scope.block3 = {
    currentPage : 0,
    pageSize : pageSizeGC,
    init : function() {
      $scope.block3.currentPage = 0;
      $scope.block3.result = null;
    },
    numberOfPages : function() {
      return Math.ceil($scope.block3.result.length / $scope.block3.pageSize);
    }
  };

  $scope.onQuery(false);
});

// We already have a limitTo filter built-in to angular,
// let's make a startFrom filter
myApp.filter('startFrom', function() {
  return function(input, start) {
    if (isNotNull(input)) {
      start = +start; // parse to int
      return input.slice(start);
    } else {
      return input;
    }

  };
});


var option_xs = {
                                  grid : {
                                    x : 40,
                                    y : 30,
                                    x2 : 10,
                                    y2 : 10
                                  },
                                    tooltip : {
                                        trigger: 'axis'
                                    },
                                    legend: {
                                        data:['蒸发量'],

                                    },
                                    toolbox: {
                                        show : true,
                                        feature : {
                                            dataView : {show: true},
                                            magicType : {show: true, type: ['line', 'bar']},
                                            restore : {show: true},
                                            saveAsImage : {show: true}
                                        }
                                    },
                                    calculable : true,
                                    xAxis : [
                                        {
                                            type : 'category',
                                            data : ['1月','2月','3月']
                                        }
                                    ],
                                    yAxis : [
                                        {
                                            type : 'value',
                                            splitArea : {show : true}
                                        }
                                    ],
                                    series : [
                                        {
                                            name:'蒸发量',
                                            type:'bar',
                                            data:[2.0, 4.9, 7.0],
                                            markLine : {
                                                data : [
                                                    {type : 'average', name: '平均值'}
                                                ]
                                            },
                                            itemStyle: {
                                              normal: {   
                                                label : {
                                                  show : true
                                                }
                                              }
                                            }
                                        }
                                    ]
                                };

                                var option_fs = {
                                  grid : {
                                    x : 40,
                                    y : 30,
                                    x2 : 10,
                                    y2 : 10
                                  },
                                    tooltip : {
                                        trigger: 'axis'
                                    },
                                    legend: {
                                        data:['降水量'],

                                    },
                                    toolbox: {
                                        show : true,
                                        feature : {
                                            dataView : {show: true},
                                            magicType : {show: true, type: ['line', 'bar']},
                                            restore : {show: true},
                                            saveAsImage : {show: true}
                                        }
                                    },
                                    calculable : true,
                                    xAxis : [
                                        {
                                            type : 'category',
                                            data : ['1月','2月','3月']
                                        }
                                    ],
                                    yAxis : [
                                        {
                                            type : 'value',
                                            splitArea : {show : true}
                                        }
                                    ],
                                    series : [
                                        
                                        {
                                            name:'降水量',
                                            type:'bar',
                                            data:[2.6, 5.9, 9.0],
                                            markLine : {
                                                data : [
                                                    {type : 'average', name : '平均值'}
                                                ]
                                            },
                                            itemStyle: {
                                              normal: {   
                                                label : {
                                                  show : true
                                                }
                                              }
                                            }
                                        }
                                    ]
                                };

var echarts;
var myChart_xs;
var myChart_fs;

  require.config({
                            paths:{ 
                                'echarts' : '/res/lib/echarts/echarts',
                                'echarts/chart/bar' : '/res/lib/echarts/echarts'
                            }
                        });

                        require(
                            [
                                'echarts',
                                'echarts/chart/bar'
                            ],
                            function(ec) {
                                echarts = ec;
                                myChart_xs = ec.init(document.getElementById('echarts-bar-xs')); 
                                myChart_fs = ec.init(document.getElementById('echarts-bar-fs')); 
                                //refresh();
                                window.onresize = myChart_xs.resize;
                                window.onresize = myChart_fs.resize;

                                console.log('55555555555');
                                myChart_xs.setOption(option_xs); 
                                myChart_fs.setOption(option_fs); 
                            }
                        );
</script>

</html>